<template>
  <div>
    <vue-qr
      v-show="false"
      :text="text"
      :logoSrc="logoSrc"
      :callback="callback"
      :margin="0"
      :size="size * 0.8"
    ></vue-qr>
    <canvas id="medo-Canvas" style="margin: 15px"></canvas>
  </div>
</template>

<script>
  import vueQr from 'vue-qr'

  export default {
    name: 'Qrcode',
    props: {
      text: {
        type: String,
        required: true,
      },
      logoSrc: {
        type: String,
        required: false,
      },
      size: {
        type: [Number],
        default: 200,
      },
    },
    components: {
      vueQr,
    },
    methods: {
      callback(url) {
        var borderImg = new Image()
        borderImg.src = require('@/assets/img/border.svg')
        var qrCodeImg = new Image()
        qrCodeImg.src = url
        var c = document.getElementById('medo-Canvas')
        var ctx = c.getContext('2d')
        var _this = this
        borderImg.onload = function () {
          c.width = _this.size
          c.height = _this.size

          borderImg.width = _this.size
          borderImg.height = _this.size

          ctx.drawImage(borderImg, 0, 0)
          ctx.drawImage(qrCodeImg, _this.size * 0.1, _this.size * 0.1)
        }
      },
    },
  }
</script>
